<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交平台 - 标签列表</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4096ff;
      --secondary: #8c8c8c;
      --light: #f5f5f5;
      --dark: #333;
      --success: #52c41a;
      --danger: #ff4d4f;
      --warning: #faad14;
      --info: #1890ff;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: var(--dark);
      padding-top: 56px; /* 为固定导航栏留出空间 */
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: white;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      z-index: 1030;
    }
    
    .navbar-brand {
      color: var(--primary);
      font-weight: 600;
    }
    
    .search-box {
      background-color: #f5f5f5;
      border-radius: 20px;
      padding: 6px 15px;
      display: flex;
      align-items: center;
      margin: 10px 0;
    }
    
    .search-box i {
      color: var(--secondary);
      margin-right: 8px;
      font-size: 14px;
    }
    
    .search-box input {
      background: transparent;
      border: none;
      outline: none;
      flex: 1;
      font-size: 14px;
      padding: 0;
    }
    
    /* 标签容器样式 */
    .tags-container {
      padding: 15px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .section-title .more {
      font-size: 14px;
      color: var(--primary);
      font-weight: normal;
    }
    
    /* 通用标签样式 */
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 14px;
      margin: 0 8px 10px 0;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .tag:hover {
      transform: translateY(-2px);
    }
    
    .tag i {
      margin-right: 6px;
      font-size: 12px;
    }
    
    .tag .count {
      margin-left: 6px;
      font-size: 12px;
      opacity: 0.8;
    }
    
    /* 分类标签样式 */
    .category-tags {
      background-color: white;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .category-tag {
      background-color: #f0f7ff;
      color: var(--primary);
      border: 1px solid #e6f7ff;
    }
    
    .category-tag.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 热门标签样式 */
    .trending-tags {
      background-color: white;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .trending-tag {
      background-color: #fff7e6;
      color: #fa8c16;
      border: 1px solid #fff1d6;
    }
    
    .trending-tag.hot {
      position: relative;
    }
    
    .trending-tag.hot::after {
      content: "HOT";
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: var(--danger);
      color: white;
      font-size: 10px;
      padding: 1px 4px;
      border-radius: 3px;
    }
    
    /* 兴趣标签样式 */
    .interest-tags {
      background-color: white;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .interest-tag {
      background-color: #f6ffed;
      color: #52c41a;
      border: 1px solid #eaffd0;
    }
    
    /* 用户创建标签样式 */
    .user-tags {
      background-color: white;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .user-tag {
      background-color: #fff0f0;
      color: #f5222d;
      border: 1px solid #ffe3e3;
    }
    
    /* 推荐标签组合样式 */
    .tag-group {
      background-color: #f0f2f5;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 15px;
    }
    
    .tag-group-title {
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 10px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
      z-index: 1020;
    }
    
    .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--secondary);
      font-size: 10px;
      flex: 1;
    }
    
    .bottom-nav-item i {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .bottom-nav-item.active {
      color: var(--primary);
    }
    
    /* 选中动画 */
    @keyframes tagSelect {
      0% { transform: scale(1); }
      50% { transform: scale(0.9); }
      100% { transform: scale(1); }
    }
    
    .tag.selected {
      animation: tagSelect 0.3s ease;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-light fixed-top">
    <div class="container px-3">
      <a class="navbar-brand" href="#">
        <i class="fa fa-tags me-1"></i>标签
      </a>
      <button class="navbar-toggler" type="button">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
  </nav>
  
  <!-- 搜索框 -->
  <div class="container px-3">
    <div class="search-box">
      <i class="fa fa-search"></i>
      <input type="text" placeholder="搜索标签...">
    </div>
  </div>
  
  <!-- 主内容区 -->
  <div class="tags-container">
    <!-- 分类标签 -->
    <div class="category-tags">
      <div class="section-title">
        内容分类
        <span class="more">更多</span>
      </div>
      <div class="tags-wrap">
        <div class="tag category-tag active">
          <i class="fa fa-th-large"></i>全部
        </div>
        <div class="tag category-tag">
          <i class="fa fa-file-text-o"></i>文章
          <span class="count">2.5k</span>
        </div>
        <div class="tag category-tag">
          <i class="fa fa-picture-o"></i>相册
          <span class="count">1.8k</span>
        </div>
        <div class="tag category-tag">
          <i class="fa fa-comment-o"></i>动态
          <span class="count">5.2k</span>
        </div>
        <div class="tag category-tag">
          <i class="fa fa-shopping-bag"></i>服务
          <span class="count">860</span>
        </div>
        <div class="tag category-tag">
          <i class="fa fa-briefcase"></i>招聘
          <span class="count">320</span>
        </div>
      </div>
    </div>
    
    <!-- 热门标签 -->
    <div class="trending-tags">
      <div class="section-title">
        热门标签
        <span class="more">换一批</span>
      </div>
      <div class="tags-wrap">
        <div class="tag trending-tag hot">
          #旅行摄影
          <span class="count">12.5k</span>
        </div>
        <div class="tag trending-tag hot">
          #美食探店
          <span class="count">9.8k</span>
        </div>
        <div class="tag trending-tag">
          #职场干货
          <span class="count">7.3k</span>
        </div>
        <div class="tag trending-tag">
          #健身打卡
          <span class="count">6.9k</span>
        </div>
        <div class="tag trending-tag">
          #电影推荐
          <span class="count">5.4k</span>
        </div>
        <div class="tag trending-tag">
          #数码测评
          <span class="count">4.7k</span>
        </div>
        <div class="tag trending-tag">
          #读书分享
          <span class="count">3.8k</span>
        </div>
        <div class="tag trending-tag">
          #穿搭技巧
          <span class="count">3.2k</span>
        </div>
      </div>
    </div>
    
    <!-- 兴趣标签 -->
    <div class="interest-tags">
      <div class="section-title">
        为你推荐
        <span class="more">刷新</span>
      </div>
      <div class="tags-wrap">
        <div class="tag interest-tag">
          <i class="fa fa-camera"></i>单反摄影
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-plane"></i>小众旅行
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-coffee"></i>咖啡文化
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-music"></i>独立音乐
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-code"></i>前端开发
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-gamepad"></i>游戏攻略
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-paint-brush"></i>插画设计
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-cutlery"></i>家常菜
        </div>
      </div>
    </div>
    
    <!-- 推荐标签组合 -->
    <div class="user-tags">
      <div class="section-title">
        热门标签组合
      </div>
      
      <div class="tag-group">
        <div class="tag-group-title">摄影爱好者常关注</div>
        <div class="tags-wrap">
          <div class="tag user-tag">#风光摄影</div>
          <div class="tag user-tag">#人像后期</div>
          <div class="tag user-tag">#器材选购</div>
          <div class="tag user-tag">#构图技巧</div>
        </div>
      </div>
      
      <div class="tag-group">
        <div class="tag-group-title">旅行者常关注</div>
        <div class="tags-wrap">
          <div class="tag user-tag">#自驾游</div>
          <div class="tag user-tag">#民宿推荐</div>
          <div class="tag user-tag">#美食地图</div>
          <div class="tag user-tag">#旅行攻略</div>
        </div>
      </div>
    </div>
    
    <!-- 最近浏览标签 -->
    <div class="interest-tags">
      <div class="section-title">
        最近浏览
      </div>
      <div class="tags-wrap">
        <div class="tag interest-tag">
          #新疆旅行
        </div>
        <div class="tag interest-tag">
          #索尼相机
        </div>
        <div class="tag interest-tag">
          #秋季穿搭
        </div>
        <div class="tag interest-tag">
          <i class="fa fa-times" style="margin-left:6px"></i>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <div class="bottom-nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </div>
    <div class="bottom-nav-item">
      <i class="fa fa-compass"></i>
      <span>发现</span>
    </div>
    <div class="bottom-nav-item active">
      <i class="fa fa-tags"></i>
      <span>标签</span>
    </div>
    <div class="bottom-nav-item">
      <i class="fa fa-user-o"></i>
      <span>我的</span>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 标签点击交互
    document.querySelectorAll('.tag').forEach(tag => {
      // 排除清除按钮
      if (!tag.querySelector('.fa-times')) {
        tag.addEventListener('click', function() {
          // 分类标签组的单选逻辑
          if (this.classList.contains('category-tag')) {
            document.querySelectorAll('.category-tag').forEach(t => {
              t.classList.remove('active');
            });
            this.classList.add('active');
          } else {
            // 其他标签的选中效果
            this.classList.toggle('selected');
          }
        });
      } else {
        // 清除最近浏览标签
        tag.addEventListener('click', function(e) {
          e.stopPropagation();
          this.parentElement.remove();
          // 如果没有最近浏览标签了，隐藏整个区域
          if (document.querySelectorAll('.interest-tags:last-child .tag').length === 0) {
            document.querySelector('.interest-tags:last-child').style.display = 'none';
          }
        });
      }
    });
    
    // 更多按钮点击
    document.querySelectorAll('.more').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('加载更多标签');
      });
    });
    
    // 模拟标签数据刷新
    document.querySelector('.section-title .more:last-child').addEventListener('click', function() {
      const newTags = [
        '#徒步露营', '#咖啡拉花', '#Python', 
        '#脱口秀', '#家居收纳', '#宠物训练'
      ];
      const tagsWrap = document.querySelector('.interest-tags .tags-wrap');
      
      // 清空现有标签（除了最后一个清除按钮）
      const clearBtn = tagsWrap.lastElementChild;
      tagsWrap.innerHTML = '';
      tagsWrap.appendChild(clearBtn);
      
      // 添加新标签
      newTags.forEach(tagText => {
        const tag = document.createElement('div');
        tag.className = 'tag interest-tag';
        tag.innerHTML = `<i class="fa fa-leaf"></i>${tagText}`;
        tag.addEventListener('click', function() {
          this.classList.toggle('selected');
        });
        tagsWrap.insertBefore(tag, clearBtn);
      });
    });
  </script>
</body>
</html>
